@require '../variables'
@require '~styles-lib/mixins'

.-container
	padding-bottom: $-item-padding-xs-v

	@media $media-sm-up
		padding-bottom: $-item-padding-v

.-item
	-activity-feed-item()

.-header
	display: flex
	align-items: flex-start

	&-avatar
		change-bg('bg-subtle')
		img-circle()
		flex: none
		overflow: hidden
		margin-right: $-item-padding-xs
		width: $-avatar-size
		height: $-avatar-size
		line-height: $-avatar-size

		.-item.-new &
			theme-prop('border-color', 'notice')
			border-width: $border-width-large
			border-style: solid

			.-header-avatar-inner
				change-bg('bg')
				img-circle()
				padding: $border-width-large

		@media $media-sm-up
			margin-right: $-item-padding

	&-content
		flex: auto
		display: flex
		align-items: center
		overflow: hidden

	&-byline
		display: flex
		flex-direction: column
		overflow: hidden

		&-name, &-game
			text-overflow()

	&-meta
		flex: none
		display: flex
		align-items: flex-end
		flex-direction: column
		margin-left: $-item-padding-xs
		line-height: $line-height-computed

		@media $media-sm-up
			margin-left: $-item-padding

		&-follow
			margin-bottom: 5px

// We need to add some extra padding to just the comment-video controls since it
// could fade-collapse before the controls, and we need the extra spacing.
.fireside-post-lead, .-controls-comment-video
	margin-top: $-item-padding-xs-v

	@media $media-sm-up
		margin-top: $-item-padding-v

.-poll, .-manage, .-communities, .fireside-post-lead
	margin-bottom: $-item-padding-xs-v

	@media $media-sm-up
		margin-bottom: $-item-padding-v

.-manage
	-activity-feed-item-padding()
	margin-bottom: $-item-padding-xs-v
	margin-left: -($-item-padding-xs)
	margin-right: -($-item-padding-xs)
	border-top: 1px solid var(--theme-bg-subtle)
	border-bottom: 1px solid var(--theme-bg-subtle)
	padding-top: 7px !important
	padding-bottom: 7px !important

	@media $media-sm-up
		margin-bottom: $-item-padding-v
		margin-left: -($-item-padding-container)
		margin-right: -($-item-padding-container)
